<template>
    <div class="outContainer">
        <bottomSearchBox @search="search"></bottomSearchBox>
        <div class="listBox">
            <div class="doitBox">
                <div class="line"  @click="chooseItemIndex(index)" :class="chooseIndex==index?'choose':''" v-for="(item,index) in 3" :key="index"></div>
            </div>
            <div class="listItemOutBox">
                <div class="listItemBox" :style="getMove">
                    <listItem @loadMore="loadMore" @goDetail="goDetail" @goAdd="goAdd" :width="width" class="listItem" v-for="(item,index) in list" :itemData="item" :key="index"></listItem>
                </div>
                <button @click="chooseIndex++" v-if="chooseIndex<2" class="el-carousel__arrow el-carousel__arrow--right">
                    <i class="el-icon-arrow-right"></i>
                </button>
                <button @click="chooseIndex--" v-if="chooseIndex>0" class="el-carousel__arrow el-carousel__arrow--left">
                    <i class="el-icon-arrow-left"></i>
                </button>
            </div>
        </div>
        
        <el-drawer
            :visible.sync="drawer"
            size="500px"
            :with-header="false">
            <listDetail @closeDrawer="drawer = false" :detail="detailData" :parentData="list[chooseIndex]"></listDetail>
        </el-drawer>
        <customer-info-add ref="CustomerAdd"></customer-info-add>
        <project-approval-add ref="ApprovalAdd"></project-approval-add>
        <project-info-add ref="ReviewAdd" source-bill-type="PROJECT_REVIEW"></project-info-add>
        <contract-add ref="ContractAdd"></contract-add>
    </div>
</template>
<script>
import CustomerInfoAdd from "@/pages/pc/components/CustomerInfoAdd.vue" //客户新增
import ProjectApprovalAdd from "@/pages/pc/components/ProjectApprovalAdd"; //项目立项新增
import ProjectInfoAdd from "@/pages/pc/components/ProjectInfoAdd";//项目评审新增
import ContractAdd from "@/pages/pc/components/ContractAdd"; // 合同制作新增
import bottomSearchBox from './bottomSearchBox.vue'
import listItem from './listItem.vue'
import listDetail from './detail.vue'
export default {
    components:{
        CustomerInfoAdd,
        ProjectApprovalAdd,
        ProjectInfoAdd,
        ContractAdd,
        bottomSearchBox,
        listItem,
        listDetail
    },
    data(){
        return {
            drawer:false,
            searchContent:'',
            width:'',
            detailData:{},
            chooseIndex:0,
            list:[
                // 客户信息
                {page:1,isBottom:true,isLoading:false,searchContent:'',greenNum:1,blueNum:1,yellowNum:1,name:'客户信息',nameValue:'Customer',addName:'新增客户',searchPlaceholder:'客户名称/客户编号/证件号码搜索',
                linkData:{
                    appletId:'8549f033-b607-43d2-83d7-9a020a607b79',
                    formUrl:'/joys/ncls-cms/#/customerInfoMain',
                },
                list:[
                    {
                        status:1,
                        statusName:'已认证客户',
                        title:'苏州市恒澄建设发展有限公司',
                        tags:[{name:'水电',type:1},{name:'内部客户',type:2}],
                        time:'2021-01-01 13:01:10',
                        userName:'小明',
                        list:[
                            {name:'客户编号：',content:'BLA1293912321992112'},
                            {name:'证件类型：',content:'证件类型'},
                            {name:'证件号码：',content:'1293124565768'},
                            {name:'客户评级：',content:'-'},
                        ]
                    }
                ]},
                // 项目立项
                {page:1,isBottom:false,isLoading:false,searchContent:'',greenNum:1,blueNum:1,yellowNum:1,name:'项目立项',nameValue:'Approval',addName:'新增立项',searchPlaceholder:'项目编号/客户名称搜索',
                linkData:{
                    appletId:'a70bba11-39f8-4de6-be10-56549e314627',
                    formUrl:'/joys/ncls-bms/#/approval',
                },
                list:[
                    {
                        status:1,
                        statusName:'已认证客户',
                        title:'苏州市恒澄建设发展有限公司',
                        tags:[{name:'水电',type:1},{name:'内部客户',type:2}],
                        time:'2021-01-01 13:01:10',
                        userName:'小明',
                        list:[
                            {name:'项目编号：',content:'BLA1293912321992112'},
                            {name:'客户名称：',content:'证件类型'},
                            {name:'项目金额：',content:'1293124565768'},
                            {name:'租赁类型：',content:'-'},
                        ]
                    },{
                        status:1,
                        statusName:'已认证客户',
                        title:'苏州市恒澄建设发展有限公司',
                        tags:[{name:'水电',type:1},{name:'内部客户',type:2}],
                        time:'2021-01-01 13:01:10',
                        userName:'小明',
                        list:[
                            {name:'项目编号：',content:'BLA1293912321992112'},
                            {name:'客户名称：',content:'证件类型'},
                            {name:'项目金额：',content:'1293124565768'},
                            {name:'租赁类型：',content:'-'},
                        ]
                    },
                    {
                        status:1,
                        statusName:'已认证客户',
                        title:'苏州市恒澄建设发展有限公司',
                        tags:[{name:'水电',type:1},{name:'内部客户',type:2}],
                        time:'2021-01-01 13:01:10',
                        userName:'小明',
                        list:[
                            {name:'项目编号：',content:'BLA1293912321992112'},
                            {name:'客户名称：',content:'证件类型'},
                            {name:'项目金额：',content:'1293124565768'},
                            {name:'租赁类型：',content:'-'},
                        ]
                    }
                ]},
                // 项目评审
                {page:1,isBottom:false,isLoading:false,searchContent:'',greenNum:1,blueNum:1,yellowNum:1,name:'项目评审',nameValue:'Review',addName:'新增评审',searchPlaceholder:'项目名称/客户名称/项目编号搜索',
                linkData:{
                    appletId:'bed31dca-40db-469d-9948-3c7cbf1263b3',
                    formUrl:'/joys/ncls-bms/#/project',
                },
                list:[
                    {
                        status:1,
                        statusName:'已认证客户',
                        title:'苏州市恒澄建设发展有限公司',
                        tags:[{name:'水电',type:1},{name:'内部客户',type:2}],
                        time:'2021-01-01 13:01:10',
                        userName:'小明',
                        list:[
                            {name:'项目编号：',content:'BLA1293912321992112'},
                            {name:'项目评级：',content:'证件类型'},
                            {name:'项目金额：',content:'1293124565768'},
                            {name:'租赁类型：',content:'-'},
                        ]
                    }
                ]},
                // 合同制作
                {page:1,isBottom:false,isLoading:false,searchContent:'',greenNum:1,blueNum:1,yellowNum:1,name:'合同制作',nameValue:'Contract',addName:'新增合同',searchPlaceholder:'合同名称/项目名称/客户名称搜索',
                linkData:{
                    appletId:'dc7a5602-32f0-4ff9-bc64-54c3ae46abd0',
                    formUrl:'/joys/ncls-bms/#/contract',
                },
                list:[
                    {
                        status:1,
                        statusName:'已认证客户',
                        title:'苏州市恒澄建设发展有限公司',
                        tags:[{name:'水电',type:1},{name:'内部客户',type:2}],
                        time:'2021-01-01 13:01:10',
                        userName:'小明',
                        list:[
                            {name:'项目编号：',content:'BLA1293912321992112'},
                            {name:'合同名称：',content:'证件类型'},
                            {name:'合同金额：',content:'1293124565768'},
                            {name:'租赁类型：',content:'-'},
                        ]
                    }
                ]},
                // 租赁放款审批
                {page:1,isBottom:false,isLoading:false,searchContent:'',greenNum:1,blueNum:1,yellowNum:1,name:'租赁放款审批',nameValue:'Loan',addName:'新增放款',searchPlaceholder:'客户名称/合同名称/放款编号搜索',
                linkData:{
                    appletId:'1a1f1ff4-d7ff-4180-a56e-e668b050bcc5',
                    formUrl:'/joys/ncls-fms/#/lease/payApproval',
                },
                list:[
                    {
                        status:1,
                        statusName:'已认证客户',
                        title:'苏州市恒澄建设发展有限公司',
                        tags:[{name:'水电',type:1},{name:'内部客户',type:2}],
                        time:'2021-01-01 13:01:10',
                        userName:'小明',
                        list:[
                            {name:'放款编号：',content:'BLA1293912321992112'},
                            {name:'投放名称：',content:'证件类型'},
                            {name:'申请付款金额：',content:'1293124565768'},
                            {name:'租赁类型：',content:'-'},
                        ]
                    }
                ]},
                // 付款执行
                {page:1,isBottom:false,isLoading:false,searchContent:'',greenNum:1,blueNum:1,yellowNum:1,name:'付款执行',nameValue:'Payment',addName:'新增付款',searchPlaceholder:'付款执行编号/客户名称/合同名称搜索',
                linkData:{
                    appletId:'5d05bb6b-e378-4ccd-90d0-193931a6a193',
                    formUrl:'/joys/ncls-fms/#/payExecution',
                },
                list:[
                    {
                        status:1,
                        statusName:'已认证客户',
                        title:'苏州市恒澄建设发展有限公司',
                        tags:[{name:'水电',type:1},{name:'内部客户',type:2}],
                        time:'2021-01-01 13:01:10',
                        userName:'小明',
                        list:[
                            {name:'付款编号：',content:'BLA1293912321992112'},
                            {name:'投放名称：',content:'证件类型'},
                            {name:'申请付款金额：',content:'1293124565768'},
                            {name:'租赁类型：',content:'-'},
                        ]
                    }
                ]},
            ]   
        }
    },
    computed:{
        getMove(){
            let width = this.width/1
            if(this.chooseIndex == 0){
                return 'transform:translate(0)'
            } else {
                return 'transform:translate(-'+(width*this.chooseIndex+24*this.chooseIndex)+'px)'
            }
            
        }
    },
    mounted(){
        let that = this
        that.width = document.documentElement.clientWidth*19.32/100
        window.onresize = ()=>{
            that.width = document.documentElement.clientWidth*19.32/100
        }
    },
    methods:{
        loadMore(item){
            console.log(this.getLoading(item.nameValue),2222)
            if(this.getLoading(item.nameValue)){
                return
            }
            console.log(111)
            this.list.forEach(itemIn=>{
                if(item.nameValue == itemIn.nameValue){
                    item.page++
                    item.isLoading = true
                    console.log(item)
                } 
            })
            this['get'+item.nameValue+'List']()
        },
        goAdd(item){
            this.$refs[item.nameValue+'Add'].onShowCancel()
        },
        goDetail(data,item){
            this.detailData = item
            this.drawer = true
        },
        init(key){
            if(key){
                this.list.forEach(item=>{
                    if(item.nameValue == key){
                        item.page = 1
                    }
                })
                this['get'+key+'List'](true)
            } else {
                this.list.forEach(item=>{
                    item.page = 1
                    this['get'+item.nameValue+'List'](true)
                })
            }
        },
        getLoading(key){
            let loading = false
            this.list.map(item=>{
                if(item.nameValue == key){
                    loading = item.isLoading
                }
            })
            return loading
        },
        setLoading(key,status){
            this.list.forEach(item=>{
                if(item.nameValue == key){
                    item.isLoading = status
                }
            })
        },
        // init为true列表等于，否则push
        // 获取客户列表
        getCustomerList(init){
            let key = 'Customer'
        },
        // 获取项目立项列表
        getApprovalList(init){
            let key = 'Approval'
            setTimeout(()=>{
                this.setLoading(key,false)
            },2000)
        },
        // 获取项目评审列表
        getReviewList(init){
            let key = 'Review'
        },
        // 获取合同制作列表
        getContractList(init){
            let key = 'Contract'
        },
        // 获取租赁放款审批列表
        getLoanList(init){
            let key = 'Loan'
        },
        // 获取租赁放款审批列表
        getPaymentList(init){
            let key = 'Payment'
        },
        search(content,key){
            if(!key){
                this.searchContent = content
                this.init()
            } else {
                this.list.forEach(item=>{
                    if(item.nameValue == key){
                        item.searchContent = content
                        item.page = 1
                    }
                })
                this['get'+item.nameValue+'List'](true)
            }
        },
        chooseItemIndex(index){
            this.chooseIndex = index
        },
    }
}
</script>
<style scoped>
.doitBox{
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}
.line{
    height: 4px;
    border-radius: 2px;
    background: rgba(135, 135, 135, 0.22);
    width: 24px;
    margin-left: 6px;
    cursor: pointer;
}
.choose{
    width:48px;
    background: #4C78FF;
}
.listItemOutBox{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.listItemBox{
    width: 150%;
    overflow: hidden;
    display: flex;
    margin-top: 16px;
    transition: all 0.5s;
}
.el-carousel__arrow{
    width: 40px;
    height: 80px;
    border-radius: 4px;
}
.el-icon-arrow-right,.el-icon-arrow-left{
    font-size: 25px;
}
</style>
